<template>
  <div class="">
    <div class="publish-title">
      发布任务
    </div>
    <keep-alive>
      <f-task-base
        v-if="currentView === 'f-task-base'"
        v-on:checkout="checkout" v-bind:taskBase="taskBase" v-bind:subTasks="subTasks">
      </f-task-base>
      <f-task-data
        v-if="currentView === 'f-task-data'"
        v-on:checkout="checkout" v-bind:taskData.sync="dataType">
      </f-task-data>
      <f-task-trade
        v-if="currentView === 'f-task-trade'"
        v-on:checkout="checkout" v-bind:taskTrade="taskTrade">
      </f-task-trade>
      <f-task-pay
        v-if="currentView === 'f-task-pay'"
        v-on:checkout="checkout" v-bind:taskPay="taskPay">
      </f-task-pay>

      <!-- <component :is="currentView" v-on:checkout="checkout"> -->
        <!-- 非活动组件将被缓存！ -->
      <!-- </component> -->
    </keep-alive>

  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
import { Toast } from 'mint-ui';
import TaskTrade from './common/TaskTrade';
import TaskBase from './common/TaskBase';
import TaskData from './common/TaskData';
import TaskPay from './common/TaskPay';
import { camelToUnderLine } from '../utils/function';
import storeItem from '../utils/store';

export default {
  name: 'publish',
  data() {
    return {
      currentView: 'f-task-base',
      taskTrade: {
        taskModel: '0',
        tradeModel: '0',
        tenderModel: '0',
        realTask: '0',
        peopleNum: '0',
        fareTask: '0',
        typeTask: '0',
        requireTask: '0',
        aimTask: '0',
      },
      taskBase: {
        name: '',
        describe: '',
        taskValue: '',
        lastTime: '',
        startTime: '',
        overTime: '',
      },
      subTasks: [],
      dataType: '0',
      taskPay: {
        total: 0,
        tradeNum: '',
      },
    };
  },
  methods: {
    checkout(component) {
      if (component === 'publish') {
        this.publish();
      } else {
        this.currentView = component;
      }
    },
    formatPublishData() {
      const publishData = {
        sub_task: [],
        task_base: {
          sub_task_num: this.subTasks.length,
          data_type: this.dataType,
          user: storeItem.getItem('user_id'),
        },
        token: storeItem.getItem('token'),
        task_ext: {
          task_fare: 50,
          trade_fare: 0,
          industry: 1,
        },
      };
      Object.entries(this.taskTrade).forEach((element) => {
        // eslint-disable-next-line
        let [key, val] = element;
        key = camelToUnderLine(key);
        publishData.task_ext[key] = val;
      });
      Object.entries(this.taskBase).forEach((element) => {
        // eslint-disable-next-line
        let [key, val] = element;
        key = camelToUnderLine(key);
        publishData.task_base[key] = val;
      });
      this.subTasks.forEach((element) => {
        publishData.sub_task.push({
          describe: element.describe,
          task_value: element.taskValue,
        });
      });
      publishData.sub_task = JSON.stringify(publishData.sub_task);
      publishData.task_base = JSON.stringify(publishData.task_base);
      publishData.task_ext = JSON.stringify(publishData.task_ext);
      return publishData;
    },
    publish() {
      const data = this.formatPublishData();
      axios.post('/task/create', qs.stringify(data)).then((response) => {
        if (response.status === 200) {
          if (response.data.status === true) {
            return response.data.data;
          }
          return 0;
        }
        return 0;
      }).then((taskId) => {
        if (taskId === 0) {
          Toast({
            message: '任务创建失败',
            duration: 1500,
          });
          return;
        }
        axios.post('/trade/calculate_task', qs.stringify({
          task_id: taskId,
          token: storeItem.getItem('token'),
        })).then((res) => {
          if (res.status === 200) {
            if (res.data.status === true) {
              this.taskPay.total = res.data.data.total;
              this.taskPay.tradeNum = res.data.data.trade_num;
              Toast({
                message: '任务创建成功，正在调转支付',
                duration: 1500,
              });
              setTimeout(() => {
                this.currentView = 'f-task-pay';
              }, 1500);
            }
          }
        });
      });
    },
  },
  components: {
    'f-task-trade': TaskTrade,
    'f-task-base': TaskBase,
    'f-task-data': TaskData,
    'f-task-pay': TaskPay,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}

.form-button {
  margin-top: 20px;
}

.form-submit {
  margin-right: 40px;
}

.form-body {
  margin-top: 20px;
}
</style>
